import { Link, Route, Switch, NavLink } from 'react-router-dom'
import { BrowserRouter } from 'react-router-dom'

function About(router) {
  return <div>about</div>
}

function Home() {
  return <div>home</div>
}

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        {/* <Link to="/">Home</Link>
      <Link to="/about">about</Link> */}

        {/* 自定义活跃路由类名 */}
        {/* <NavLink activeClassName="six" to="/home">Home</NavLink>
        <NavLink activeClassName="six" to="/about">about</NavLink> */}

        {/* 内联样式 */}
        <NavLink activeStyle={{color: 'blue'}} to="/home">Home</NavLink>
        <NavLink activeStyle={{color: 'red'}} to="/about">about</NavLink>
        <div>
          <Route component={Home} path="/home"></Route>
          <Route component={About} path="/about"></Route>
        </div>
      </BrowserRouter>
    </div>
  )
}

export default App
